<script setup lang="ts">
import { ref } from 'vue'
import Header from "../components/Header.vue";
import {Bell, Star} from "@element-plus/icons-vue";
import { Refresh } from '@element-plus/icons-vue'


import Left from "../components/Left.vue";
import Mid from "../components/Mid.vue";
import Right from "../components/Right.vue";



</script>

<template>
  <div id="body">
    <el-container >
      <el-header>
        <Header></Header>
      </el-header>
      <el-container>
        <el-aside width="220px">
          <Left></Left>
        </el-aside>
        <el-main>
          <Mid></Mid>
        </el-main>
        <el-aside width="300px">
          <Right></Right>
        </el-aside>
      </el-container>
    </el-container>
  </div>





</template>

<style scoped>
/* 移除默认边距和间隙 */
.el-container {
  height: calc(100vh - 60px);
}
#body{
  background-color: #E5E6EB;
}
.el-header {
  padding: 0;
}

.el-aside {
  margin: 0 5px 0 5px;
  padding: 0;

}

.el-main {
  margin: 0;
  padding: 0;
  overflow-y: auto; /* 允许内容滚动 */
}

/* 确保Right组件无缝衔接 */
.right-aside {
  margin: 0;

}
</style>